<template>
    <div id="files-tool-window">
        <div class="files-tool-window-header">
            <div class="files-tool-window-header-manager">
                <div>
                    <el-dropdown trigger="click">
                      <span class="el-dropdown-link">
                        Manager
                        <el-icon class="el-icon--right">
                          <arrow-down/>
                        </el-icon>
                      </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item icon="ToolWindowProjectIcon" @click="openDirDialog=true">
                                    <!-- 打开我的项目浏览目录  -->
                                    打开
                                </el-dropdown-item>
                                <el-dropdown-item divided>
                                    <!-- 我的项目列表  -->
                                    list...
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div>
                <el-dialog
                        v-model="openDirDialog"
                        width="30%"
                        draggable
                        :close-on-click-modal="false"
                        style="border-radius: 10px"
                >
                    <template #header>
                        <div>
                            open
                        </div>
                    </template>
                    <div>
                        <!-- 显示用户的文件树，让用户只能选择文件夹进行打开 -->
                        <div>
                            <!-- 仅能新创建目录 -->
                            <el-button type="primary">new</el-button>
                        </div>
                        <div class="dir-box">
                            <el-tree
                                    accordion
                                    draggable
                                    :data="files"
                                    :props="defaultProps"
                                    node-key="file.fileId"
                                    :highlight-current="true"
                                    empty-text="No Data"
                            >
                                <template #default="{node,data}">
                                    <select-file-label :file="node.data.file"/>
                                </template>
                            </el-tree>
                        </div>
                    </div>
                    <template #footer>
                        <div>
                            <!-- 打开选中目录到文件工具窗口 -->
                            <el-button type="primary" style="width: 70px">ok</el-button>
                            <el-button type="default" style="width: 70px" @click="openDirDialog=false">clean</el-button>
                        </div>
                    </template>
                </el-dialog>
            </div>
        </div>
        <!--      :style="{width:fileTool.maxWidth+'px'}" -->
        <div class="files-tree">
            <file-tree/>
        </div>
    </div>
</template>

<script setup lang="ts">
import FileTree from "./FileTree.vue";
import SelectFileLabel from "./SelectFileLabel.vue";
import {onBeforeMount, ref} from "vue";
import {useFileStore} from "../../store/filesTool";
import {useLeftToolStore} from "../../store/leftTool";

const fileTool = useFileStore()
const tool = useLeftToolStore()

const openDirDialog = ref(false)

const defaultProps = {
    children: 'children',
    label: 'file',
}
const files = []

onBeforeMount(() => {
    fileTool.UpdateMaxWidth(tool.leftWidth)
})

</script>

<style scoped>
#files-tool-window {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.files-tool-window-header {
    width: 100%;
    height: 30px;
    background-color: #f8f9fb;
    display: flex;
    flex-direction: row;
}

.files-tool-window-header-manager {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5px;
}

.files-tool-window-header-manager:hover {
    cursor: pointer;
}

.files-tree {
    width: 100%;
    flex: 1;
    overflow: auto;
}

.dir-box {
    height: 400px;
    border-width: 1px;
    border-style: solid;
    border-color: #e3e7e2;
    margin-top: 5px;
    overflow: auto;
}
</style>